<!DOCTYPE html>
<!-- Ported from the OpenGL Samples Pack: https://github.com/g-truc/ogl-samples/blob/master/tests/gl-320-transform-feedback-separated.cpp -->
<html lang="en">

<head>
    <title>WebGL 2 Samples - transform_feedback_separated</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="info">WebGL 2 Samples - transform_feedback_separated</div>
    <p id="description">
        This simple sample shows how to use transform feedback. The first draw has no rasterization, but output the
        position and color attribute as the input of each vertex in the second draw.<br />
        Each attribute of the transform feedback output is stored in separate buffers (separated).
    </p>

    <script id="vs-transform" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0

        precision highp float;
        precision highp int;

        uniform mat4 MVP;
        layout(location = POSITION_LOCATION) in vec4 position;

        out vec4 v_color;

        void main()
        {
            gl_Position = MVP * position;
            v_color = vec4(clamp(vec2(position), 0.0, 1.0), 0.0, 1.0);
        }
    </script>

    <!-- This fragment shader will not be called since it is used when the rasterizer is disabled. -->
    <script id="fs-transform" type="x-shader/x-fragment">
        #version 300 es
        precision highp float;
        precision highp int;

        in vec4 v_color;
        out vec4 color;

        void main()
        {
            color = v_color;
        }
    </script>

    <script id="vs-feedback" type="x-shader/x-vertex">
        #version 300 es
        #define POSITION_LOCATION 0
        #define COLOR_POSITION 3

        precision highp float;
        precision highp int;

        layout(location = POSITION_LOCATION) in vec4 position;
        layout(location = COLOR_POSITION) in vec4 color;

        out vec4 v_color;

        void main()
        {
            gl_Position = position;
            v_color = color;
        }
    </script>

    <script id="fs-feedback" type="x-shader/x-fragment">
        #version 300 es
        precision highp float;
        precision highp int;

        in vec4 v_color;

        out vec4 color;

        void main()
        {
            color = v_color;
        }
    </script>

    <script type="module" src="./transform_feedback_separated.ts">
    </script>
    <div id="highlightedLines" style="display: none">#L108-L251</div>

</body>

</html>